<template>
  <el-dialog
    :title="isEdit ? '修改公告' : '添加公告'"
    :visible.sync="centerDialogVisible"
    width="55%"
    :before-close="close"
  >
    <el-form ref="rulForm" :model="rulForm" :rules="rules" label-width="80px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="rulForm.title" style="width: 260px"></el-input>
      </el-form-item>
      <el-form-item label="公告内容" prop="content">
        <UEditor v-model="rulForm.content" @ueChange="ueChange" />
      </el-form-item>
      <el-form-item label="公告图片" prop="picture">
        <el-upload
          class="avatar-uploader"
          action="http://estate.eshareedu.cn/estate/api/upload/add"
          name="file"
          :headers="{ Authorization }"
          :on-success="fileSuccess"
          :limit="3"
          :on-exceed="handleExceed"
        >
                            <img
            v-if="rulForm.picture"
            :src="'http://estate.eshareedu.cn/estate/upload/' + rulForm.picture"
            class="avatar"
          />
                            <i 
            style="border: 1px solid red"
            v-else
            class="el-icon-plus avatar-uploader-icon"
          ></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-radio v-model="rulForm.state" label="1">开始</el-radio>
        <el-radio v-model="rulForm.state" label="0">关闭</el-radio>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="rulForm.type" placeholder="请选择">
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="newsAdd('rulForm')">确定</el-button>
        <el-button @click="close()">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import UEditor from "../UEditor.vue";
import { Addnews, newstype } from "../../api/news";
export default {
  props: {
    centerDialogVisible: {
      type: Boolean,
    },
    item: {
      type: Object,
    },
    isEdit: {
      type: Boolean,
    },
  },
  //import引入的组件需要注入到对象中才能使用
  components: {
    UEditor,
  },
  data() {
    //这里存放数据
    return {
      Authorization: sessionStorage.getItem("token"),
      rulForm: {
        id: 0,
        title: "",
        picture: "",
        edituser: "",
        state: 1,
        type: Number,
        hits: 0,
        content: "",
        addtime: "2021-10-25 09:56:47",
      },
      rules: {
        title: [{ required: true, message: "请输入公告标题", trigger: "blur" }],
      },
      typeList: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},

  //方法集合
  methods: {
    ueChange(data) {
      this.content = data;
    },
    //添加和修改
    newsAdd(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let data = await Addnews(this.rulForm);
          console.log(data);
          if (data.data.id == 0) {
            this.$message.success("添加成功");
            this.close();
          } else {
            this.$message.success("修改成功");
            this.close();
          }
        } else {
          return false;
        }
      });
    },

    async newstype() {
      const { data } = await newstype();
      this.typeList = data.list;
    },

    close() {
      this.rulForm = {
        title: "",
        picture: "",
        edituser: "",
        state: null,
        type: null,
        hits: 0,
        content: "",
        addtime: "2021-10-25 09:56:47",
      };
      this.$emit("close", false);
    },
    //文件上传
    fileSuccess(data) {
      this.rulForm.picture = data.data;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
  },
  //监控data中的数据变化
  watch: {
    item: {
      immediate: true,
      handler(newVal) {
        this.rulForm = JSON.parse(JSON.stringify(newVal));
      },
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.newstype();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.el-dialog__header {
  background-color: #fff;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>